// 动态渲染函数
function RenderDom (){
  let app = document.querySelector('.app')
  let box = document.createElement('div')
  box.setAttribute('class','box') // 给box 检查类名 没有类名 则加上
  box.innerHTML = `<ul class="list">
      <li class="in_active" style="background-color: lightgreen">第一张选项卡</li>
      <li class="in" style="background-color: lightblue">第二张选项卡
        <button>下一页</button>
      </li>
      <li class="in" style="background-color: pink">第三张选项卡</li>
    </ul>`
    app.appendChild(box)
}

// 普通选项卡功能
RenderDom.prototype.createTab = function(){
  let box = document.querySelector('.box')
  let nav = document.createElement('nav')
  nav.setAttribute('class' , 'conList')
  nav.innerHTML = `<a class="con_active" href="javascript:;">第一个控制按钮</a>
  <a class="con" href="javascript:;">第二个控制按钮</a>
  <a class="con" href="javascript:;">第三个控制按钮</a>`
  box.appendChild(nav)

  // 给tab栏添加事件
  let as = document.querySelectorAll('a')
  as.forEach((item,ind)=>{
    item.num = ind
    item.onclick = function(){
      switchNext(item.num)
    }
  })
}

// tab栏切换函数
RenderDom.prototype.toggle = function(){
  RenderDom.prototype.createTab()
  let btn = document.querySelector('button')
  let count = 1 // 切换一张
  btn.onclick = function(){
    console.log(count);
    count = switchNext(count)
  }
}

// 自动轮播功能
// RenderDom.prototype.autoToggle = function(){
//   RenderDom.prototype.createTab()
//   let flag = 1
//   setInterval(()=>{
//     flag = switchNext(flag)
//   },2000)
// }

// 排他思想 参数 切换几张
let switchNext = (count)=>  {
  let lis = document.querySelectorAll('li')
  let as  = document.querySelectorAll('a')
  lis.forEach((item,ind)=>{
    item.className = 'in';
    as[ind].className = 'con';
  })
  lis[count].className = 'in_active';
  as[count].className = 'con_active';
  count == 2 ? count =0 : count ++
  return count
}

